<template>
	<div id="contentBox">

		<div class="searchBox">
			<el-form :inline="true"  ref="searchForm"  :model="searchForm" label-width="96px">
	          
				<el-form-item label="申请日期起"   prop="startDate">
				    <el-date-picker :editable="false"    
				      @change="startDateGet" 
				      v-model="searchForm.startDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="startDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>
				<el-form-item label="申请日期止"  prop="endDate">
				    <el-date-picker :editable="false"   
				      @change="endDateGet" 
				      v-model="searchForm.endDate"
				      type="date"
				      placeholder="选择日期"
				      :picker-options="endDateOpt"
				      >
				    </el-date-picker>
				</el-form-item>

				  <el-form-item label="订单号"  prop="orderNumber" >
				    <el-input v-model="searchForm.orderNumber"  @input.native="changeQuey()"    placeholder="请输入搜索内容..." ></el-input >
				</el-form-item>
				<el-form-item label="经销商名称" prop="dealerName" >
				    <el-input v-model="searchForm.dealerName"   @input.native="changeQuey()"   placeholder="请输入搜索内容..." ></el-input >
				</el-form-item> 


	            <el-form-item label="汽车车型"  prop="carBrand">
				   <el-input v-model="searchForm.carBrand"  @input.native="changeQuey()"   placeholder="请输入搜索内容..."></el-input >
				</el-form-item>
				 
				<el-form-item style="    margin-bottom: 10px;">
				   <!--  <el-button type="primary" @click="getContractinfoList(searchForm)">搜索</el-button> -->
				    <el-button @click="resetSearchForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
			
		</div> 
		
		<div id="tableBox" style="margin:25px 25px 0;" >
			<el-table :data="tableData.data" border  >
			    <el-table-column label="订单号" width="120">
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="经销商名称" width="250">
			      <template scope="scope">
			        <span >{{ scope.row.dealerName }}</span>
			      </template>
			    </el-table-column> 
			    <el-table-column label="汽车车型" min-width="300">
			      <template scope="scope">
			        <span >{{ scope.row.carBrandNameAndCarName }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="垫资金额" width="120">
			      <template scope="scope">
			        <span  > {{ scope.row.paymentAmount |toFixed2}}</span> 
			      </template>
			    </el-table-column>
			     <el-table-column label="订单状态" width="100">
			      <template scope="scope">
			        <span  v-for="(index, item) in scope.row.statusVO" > {{ item }}</span>
			      </template>
			    </el-table-column>
			    
			    <el-table-column label="操作" width="85">
			      <template scope="scope">
			      	<el-button type="primary"   size="small" @click="handleEdit(scope.$index, scope.row)">生成合同</el-button>
			     <!--  	<el-button type="success" size="small" @click="handleSee(scope.$index, scope.row)">查看订单</el-button> -->
			      </template>
			    </el-table-column>
			</el-table>

			<!-- <el-button size="small" @click="test()">测试</el-button> -->

            <el-dialog  title="添加合同" v-if="dialogFormVisible.bool" :visible.sync="dialogFormVisible.bool"  :lock-scroll='false' top=5% :close-on-click-modal="false" v-dialogDrag>
				<dialogForm v-bind:dialogFormVisible="dialogFormVisible" :query="query" :isAdd="isAdd" :dialogFormInfo="dialogFormInfo"></dialogForm>
				
			</el-dialog>
	    </div>

	    <div class="block" style="text-align: center;margin-top: 15px;">
		     <pagination v-on:refreshSeachData="getTobeAddedContractOrder()"  :tableData="tableData" :searchForm="searchForm">
	    	</pagination>
		</div>

	</div>
</template>
<script src="./index.js">

</script>
<style scoped lang="stylus" rel="styleheet/stylus">
	@import './index.styl';
</style>

